<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <!-- 使用场景，未登录网站中，搜索框搜索某个内容后，再次进入网站中的搜索历史 -->
    <h2>localStorage</h2>
    <button onclick="saveData()">点我存入一个数据</button>
    <button onclick="readData()">读取一个数据</button>
    <button onclick="delData()">删除一个数据</button>
    <button onclick="clearData()">清空数据</button>
    <script>
        let person ={id:'001',name:'大志强',age:18}
        function saveData(){
            window.localStorage.setItem('msg','hello1')  // 因为是window上带的，可以省略不写
            localStorage.setItem('msg','hello1222')  // key值重复的话，值会进行覆盖
            localStorage.setItem('msg','hello1222')  // key与值，都是string类型，即使值给的是字符也会转换成字符型
            localStorage.setItem('age',222)  // key与值，都是string类型，即使值给的是字符也会转换成字符型


            localStorage.setItem('per',person)  // 如果存的是对象，会存储对象的toString方法，[object Object]
            localStorage.setItem('per2',JSON.stringify(person))  // 如果存的是对象，除非调用JSON的Stringfy能够正确的存储内容。

        }

        function readData(){
            const x = localStorage.getItem('age')
            console.log(x);
            const y = localStorage.getItem('per2')
            console.log(JSON.parse(y));
        }
        function clearData(){
            localStorage.clear()
        }

    </script>
</body>
</html>